<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Python脚本管理系统</title>
    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="/static/img/favicon.svg">
    <!-- Bootstrap CSS -->
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="/static/css/style.css" rel="stylesheet">
    {{block "head" .}}{{end}}
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏 -->
            <div class="col-md-2 sidebar">
                <div class="d-flex flex-column">
                    <h4 class="mb-4">
                        <img src="/static/img/favicon.svg" alt="Logo" width="32" height="32" class="me-2">
                        脚本管理系统
                    </h4>
                    <nav class="nav flex-column">
                        <a class='nav-link {{if eq .ActivePage "home"}}active{{end}}' href="/">
                            <i class="fas fa-home"></i> 首页
                        </a>
                        <a class='nav-link {{if eq .ActivePage "scripts"}}active{{end}}' href="/scripts">
                            <i class="fas fa-code"></i> 脚本管理
                        </a>
                        <a class='nav-link {{if eq .ActivePage "venvs"}}active{{end}}' href="/venvs">
                            <i class="fas fa-box"></i> 虚拟环境
                        </a>
                    </nav>

                    <!-- 系统资源监控 -->
                    <div class="mt-auto">
                        <h6 class="text-muted mb-3">系统资源</h6>
                        <div class="system-info">
                            <div class="card mb-2">
                                <div class="card-body">
                                    <div class="card-title">CPU 使用率</div>
                                    <div class="card-text" id="cpu-usage">0%</div>
                                </div>
                            </div>
                            <div class="card mb-2">
                                <div class="card-body">
                                    <div class="card-title">内存使用率</div>
                                    <div class="card-text" id="memory-usage">0%</div>
                                </div>
                            </div>
                            <div class="card mb-2">
                                <div class="card-body">
                                    <div class="card-title">磁盘使用率</div>
                                    <div class="card-text" id="disk-usage">0%</div>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-body">
                                    <div class="card-title">运行中脚本</div>
                                    <div class="card-text" id="running-scripts">0</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 主要内容区域 -->
            <div class="col-md-10 main-content">
                {{template "content" .}}
            </div>
        </div>
    </div>

    <!-- Toast容器 -->
    <div class="toast-container position-fixed bottom-0 end-0 p-3">
        <div id="toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
                <strong class="me-auto" id="toast-title">提示</strong>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body" id="toast-message"></div>
        </div>
    </div>

    <!-- jQuery -->
    <script src="/static/js/jquery.min.js"></script>
    <!-- Bootstrap Bundle with Popper -->
    <script src="/static/js/bootstrap.bundle.min.js"></script>
    <script src="/static/js/system-monitor.js"></script>
    <script>
        function showToast(message, type = 'info') {
            const toast = document.getElementById('toast');
            const toastMessage = document.getElementById('toast-message');
            const toastTitle = document.getElementById('toast-title');
            
            // 设置消息
            toastMessage.textContent = message;
            
            // 设置标题和样式
            switch(type) {
                case 'error':
                    toastTitle.textContent = '错误';
                    toast.classList.add('bg-danger', 'text-white');
                    break;
                case 'success':
                    toastTitle.textContent = '成功';
                    toast.classList.add('bg-success', 'text-white');
                    break;
                case 'warning':
                    toastTitle.textContent = '警告';
                    toast.classList.add('bg-warning');
                    break;
                default:
                    toastTitle.textContent = '提示';
                    toast.classList.add('bg-info', 'text-white');
            }
            
            // 显示toast
            const bsToast = new bootstrap.Toast(toast);
            bsToast.show();
            
            // 监听隐藏事件，移除样式类
            toast.addEventListener('hidden.bs.toast', function () {
                toast.classList.remove('bg-danger', 'bg-success', 'bg-warning', 'bg-info', 'text-white');
            });
        }
    </script>
    {{block "scripts" .}}{{end}}
</body>
</html> 